<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition   xmlns:ui="http://java.sun.com/jsf/facelets"               
                  xmlns:f="http://java.sun.com/jsf/core"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:p="http://primefaces.org/ui"
                  xmlns="http://www.w3.org/1999/xhtml"  >
    <f:view>
        <h:form>
            <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/> 
            <p:dialog modal="true" widgetVar="statusDialog" header="Waiting..."    
                      draggable="false" closable="false">  
                <p:graphicImage value="./resources/images/ajax_loading_bar.gif" />  
            </p:dialog>
            <div style="display:inline-block;width:100%; background-color: #bbbbbb; vertical-align: text-top;">
                <div style="float: left;">
                    <h2 class="panel_user" >Login</h2>
                    <p:panel id="panel1"  style="border: none; height: 310px;">
                        <p:messages showDetail="false
                                    " id="msgs" />
                        <p:panelGrid >
<!--                            <f:facet name="header">  
                                <p:row>  
                                    <p:column colspan="3"></p:column>  
                                </p:row>  
                            </f:facet>-->

                            <p:row>  
                                <p:column  styleClass="columns"   >
                                    <h:outputLabel for="username" value="Username: *" />  
                                </p:column>  
                                <p:column  styleClass="columns"  >
                                    <p:inputText size="15" id="username" value="#{userControl.user.userName}" requiredMessage="Username is required" required="true" label="Username" />
                                </p:column>

                                <p:column rowspan="2"  styleClass="columns"  >
                                    <p:graphicImage value="./resources/images/login.png" width="80" height="90" />
                                </p:column>
                            </p:row>
                            <p:row>  
                                <p:column   styleClass="columns"  >
                                    <h:outputLabel for="password" value="Password: *" />  
                                </p:column>  
                                <p:column  styleClass="columns"  >
                                    <p:keyboard size="15" value="#{userControl.user.passWord}" layout="qwertyBasic" required="true" id="password" requiredMessage="Password is required" password="true" label="Password" />
                                </p:column>  
                            </p:row>

                            <!--                                <f:facet name="footer">-->
                            <p:row>
                                <p:column colspan="3"  styleClass="columns" style="text-align: center" >
                                    <p:commandButton actionListener="#{userControl.checkLogin()}" value="Login" icon="ui-icon-check" update="panel1"  style="color: #2e16b1;"  />  
                                </p:column>
                            </p:row>
                            <!--                                </f:facet>-->
                            <p:row> <p:column colspan="3"  style="text-align: center"  >

                                    <p:commandLink actionListener="#{userControl.forgotPassword()}" value="Forgot password" style="color: #2e16b1;" immediate="true" ></p:commandLink>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:panel>
                </div>
                <div style="float: left;width: 50%; padding-left: 20px">
                    <h2 class="panel_user">Welcome to the Blue Pumpkin</h2>
                    <p:panel style="border: 1px solid #ff6400; width: 100%;  height: 310px;" >

                        <div style="color: black">
                            <p>
                                Blue Pumpkin has professional consultants and practitioners in the field of Marketing and Media. As long as with depth in understanding Vietnam culture, we provide new strategies and
                                technologies to support client be the greatest in media and communication.
                            </p>
                            <h3 style="color: #ff6400">Contact information</h3>
                            <div>
                                <ul style="list-style: none">
                                    <li>Address: 131 No Trang Long st, Binh Thanh dist, Ho Chi Minh city, Vietnam</li>
                                    <li>Email: info@bluepumpkin.com</li>
                                    <li>Phone: (084)909.999.999</li>
                                </ul>
                            </div>
                        </div>

                    </p:panel>
                </div>
            </div>

        </h:form>
    </f:view>
<div class="separator_div"/>

</ui:composition>
